<template>
    <h1>ref 和 reactive 的区别,toRefs的没用的用法</h1>
    <div class="container">
        <h3>车的信息:</h3>
        <p>品牌: {{ car.brand }} , 价格: {{ car.price }}</p>
        <button @click="changeBrand">改变品牌</button> <button @click="changePrice">改变价格</button><button @click="changeCar">换一辆车</button>
        <h3>学生信息:</h3>
        <p>姓名 : {{ name }} , age: {{ age }}</p>
        <button @click="changeName">改名</button> <button @click="changeAge">改变年龄</button><button @click="changeStudent">下一个学生</button>
</div>
</template>

<script setup lang="ts">
import { reactive,toRefs } from 'vue';
let car = reactive({
  brand:'奔驰',
  price:50  
})

function changeBrand(){
  car.brand = '宝马'
}
function changePrice(){
  car.price = 100
}
function changeCar(){
   Object.assign(car,{brand:'奥迪',price:200})
}


let student = reactive({
    name:'张三',
    age:20
})
let {name,age} = toRefs(student)
function changeName(){
    name.value = '李四'
}
function changeAge(){
    age.value = 25
}
function changeStudent(){
    Object.assign(student,{name:'王五',age:30})
}
</script>

<style scoped>
    .container{
        margin-top: 30px;
        background-image: linear-gradient(to right bottom,#231e61, #142783,#4168d3, #76b6e8);
        color: white;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
        
    }
</style>